<template>
  <el-dialog
    width="460px"
    :title="$t('dialog.diaFlowIcon')"
    v-model="dialogFlowIocnVisible"
    :before-close="() => {}"
    :show-close="false"
  >
    <el-container>
      <el-main class="flow-icon-main">
        <el-scrollbar>
          <div
            v-for="(item, index) in icons"
            :key="index"
            class="flow_icon_div"
          >
            <el-button
              type="primary"
              :style="
                item === icon
                  ? { background: background, 'border-color': background }
                  : ''
              "
              @click="confirm(item)"
            >
              <svg class="icon" aria-hidden="true">
                <use :xlink:href="item" />
              </svg>
            </el-button>
          </div>
        </el-scrollbar>
      </el-main>
    </el-container>
  </el-dialog>
</template>
<script>
import flowconf from "../assets/config/model.json";
export default {
  emits: ["confirmEvent"],
  name: "flow-icon",
  data() {
    return {
      icons: flowconf.conf.flowicons,
      dialogFlowIocnVisible: false,
      icon: "",
      background: "",
    };
  },
  methods: {
    confirm(item) {
      this.dialogFlowIocnVisible = false;
      this.$emit("confirmEvent", item);
    },
  },
};
</script>
<style>
.flow_icon_div {
  margin: 10px;
  float: left;
}
.flow-icon-main {
  padding: 0px;
  height: 360px;
}
</style>
